<template>
  <div class="view-container">
    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div v-if="formData">
          <span style="font-size: 16px; margin-right: 20px">
            {{ formData.terminalName }}
          </span>
          <el-tag type="warning" size="small" style="margin-right: 15px">
            {{ getLabel('terminal_status', formData.terminalStatus) }}
          </el-tag>
          <el-tag v-if="formData.ifChange === 1 && formData.flowStatus === 'DOING'" type="warning" size="small">
            <span>资质信息审核中</span>
          </el-tag>
        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" @click="handlBack">返回</el-button>

        <template v-if="formData">
          <el-button v-auth="{v:['crm:marketing:cooperationInformation:serviceTerminal:editor'],
            bool: formData?.terminalStatus === '-2' || formData?.flowStatus === 'REJECT_INITIATOR'}" size="small"
            type="primary" @click="handlEdit">
            编辑
          </el-button>

          <el-button v-auth="{v:['crm:marketing:cooperationInformation:serviceTerminal:delete'],
            bool: formData?.terminalStatus === '-2' || formData?.terminalStatus === '-3'}" size="small" type="primary"
            @click="handlDele">
            删除
          </el-button>

          <el-button v-auth="{v:['crm:marketing:cooperationInformation:serviceTerminal:qualification'],
            bool: formData?.ifWaitQualifications === 1 }" class="main-btn" size="small" type="primary"
            @click="handlQualification">
            <span v-if="formData?.ifQualifications === 1">变更资质</span>
            <span v-if="formData?.ifQualifications === 0">完善资质</span>
          </el-button>
        </template>

      </template>
    </header-module>
    <div style="background-color: white;padding-top: 20px">
      <el-form v-if="formData" :inline="true" label-position="left" size="small" class="filter-form-inline">
        <el-row :gutter="40" style="margin-left: 20px; margin-right: 20px">
          <el-col :lg="6" :xs="4" class="col">
            <el-form-item label="终端编号：">
              <span>{{ formData.terminalNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="4">
            <el-form-item label="终端类型：">
              <span>{{ getLabel('app_mode', formData.terminalType) }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="所在地区：" class="item_col">
              <span>{{ formData.provinceName }}/{{ formData.cityName }}/{{ formData.areaName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="main-content" style="margin-top: 20px">
      <div class="list-container">
        <el-tabs v-model="activeName" class="elTabs" @tab-click="handleClick">
          <el-tab-pane label="详细信息" name="detailList" />

          <el-tab-pane label="开发中产品" name="product"
            v-if="formData?.terminalStatus === '1' || formData?.terminalStatus === '2'" />

          <el-tab-pane label="营销合同" name="sales"
            v-if="formData?.terminalStatus === '1' || formData?.terminalStatus === '2'" />

          <el-tab-pane label="跟进记录" name="followUp"
            v-if="formData?.terminalStatus === '1' || formData?.terminalStatus === '2'" />

          <el-tab-pane label="客户地址" name="customer"
            v-if="formData?.terminalStatus === '1' || formData?.terminalStatus === '2'" />

          <el-tab-pane label="联系人" name="contact"
            v-if="formData?.terminalStatus === '1' || formData?.terminalStatus === '2'" />

          <el-tab-pane label="修改记录" name="record" />
        </el-tabs>
      </div>
      <!--tabs信息-->
      <component :is="currrentTabs" :id="queryId" ref="componentTabs" :form-data="formData" type-data="terminal"
        :contract-data="contractData" :pms="pms" :objectId="formData?.id" customerType="2" />
      <!--注册终端-->
      <registered ref="registeredDialog" @succsessReg="succsessReg" />
      <!--变更信息 -->
      <rule-form ref="ruleFormDialog" form-type="2" :type-str="typeStr" @succsess="succsess" />
      <!--完善资质-->
      <qualification ref="qualificationDialog" @qualificationsSuccsess="qualificationsSuccsess" />
    </div>
  </div>
</template>

<script>
import {
  computed,
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRoute, useRouter } from "vue-router";

export default {
  components: {
    detailList: defineAsyncComponent(() => import("../modules/details.vue")),
    product: defineAsyncComponent(() => import("../modules/product.vue")),
    sales: defineAsyncComponent(() =>
      import("@CRM/views/commonView/contract/contract.vue")
    ),
    customer: defineAsyncComponent(() =>
      import("@CRM/views/commonView/address/addressList.vue")
    ),
    contact: defineAsyncComponent(() =>
      import("@CRM/views/commonView/contact/contact.vue")
    ),
    record: defineAsyncComponent(() => import("../modules/record.vue")),
    registered: defineAsyncComponent(() => import("../modules/registered.vue")),
    ruleForm: defineAsyncComponent(() => import("../modules/ruleForm.vue")),
    qualification: defineAsyncComponent(() =>
      import("../modules/qualification.vue")
    ),
    followUp: defineAsyncComponent(() =>
      import("@CRM/views/marketing/customer/modules/followUp.vue")
    ),
  },
  setup(props, context) {
    const currentInstance = getCurrentInstance();
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    var data = reactive({
      activeName: "detailList",
      formData: null,
      registeredDialog: null,
      componentTabs: null,
      contractData: null,
      ruleFormDialog: null,
      typeStr: "",
      qualificationDialog: null,
      queryId: 0,
      pms: [],
    });
    // 获取详情
    const handlDetail = (id) => {
      api.terminal.TERMINAL_DETAIL(id).then((res) => {
        if (res.code === 0) {
          data.formData = res.data.terminal;
          data.contractData = {
            id: data.formData.id,
            name: data.formData.terminalName,
            contractType: "sale",
            contractObjectType: "terminal",
            title: "营销合同详情",
            disabled: true,
            pms: [
              "crm:marketing:cooperationInformation:serviceTerminal:potential:contract",
            ],
          };
        }
      });
    };

    // 删除
    const handlDele = () => {
      currentInstance.proxy
        .alertBox({
          message: "是否确认删除该终端？",
          title: "终端删除",
        })
        .then(() => {
          api.terminal.TERMINAL_DELETE(route.query.id).then((res) => {
            if (res.code) {
              currentInstance.proxy.customMessage({
                type: "error",
                message: res.msg,
              });
            } else {
              handlBack();
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    };

    // 刷新数据
    const succsess = () => {
      handlDetail(route.query.id);
    };

    // 返回
    const handlBack = () => {
      router.go(-1);
    };

    // 注册终端
    const handlNew = () => {
      data.registeredDialog.open(data.formData, null);
    };

    // 变更信息
    const handlEdit = () => {
      data.typeStr = "change";
      data.ruleFormDialog.open(route.query.id, 2);
    };

    // 切换tabs
    const handleClick = (tab, event) => {
      data.activeName = tab.props.name;
      if (tab.props.name === "customer") {
        data.pms = [
          "crm:marketing:cooperationInformation:serviceTerminal:potential:address",
        ];
      }
      if (tab.props.name === "contact") {
        data.pms = [
          "crm:marketing:cooperationInformation:serviceTerminal:potential:contact",
        ];
      }
    };

    // 计算
    const currrentTabs = computed(() => {
      return data.activeName;
    });

    // 完善资质
    const handlQualification = () => {
      data.qualificationDialog.open(data.formData);
    };

    const succsessReg = () => {
      if (data.activeName === "product") {
        data.componentTabs.handlList();
      }
    };

    const qualificationsSuccsess = () => {
      handlDetail(route.query.id);
    };

    //* *****************
    onMounted((_) => {
      if (route.query.id) {
        data.queryId = Number(route.query.id);
        handlDetail(route.query.id);
      }
    });
    //* *****************
    return {
      ...toRefs(data),
      currrentTabs,
      handlNew,
      handlBack,
      handleClick,
      handlDetail,
      handlEdit,
      succsess,
      handlQualification,
      qualificationsSuccsess,
      succsessReg,
      handlDele,
    };
  },
};
</script>

<style scoped lang="scss">
/* @import url(); 引入css类 */
:deep(.col) {
  padding: 0 !important;
}

:deep(.item_col) {
  width: 100%;

  .el-form-item__content {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

:deep(.item_col1) {
  width: 100%;

  .el-form-item__content {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
